<template>
  <div id="cesiumContainer"></div>
</template>
 
<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
  //快速搭建环境时默认的配置
  // const viewer = new Cesium.Viewer('cesiumContainer');

  // 引入服务器提供的图像
  var custom = new Cesium.ArcGisMapServerImageryProvider({
    url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
  });

  //自定义的配置内容
  var viewer = new Cesium.Viewer('cesiumContainer', {
    //配置是否创建baseLayerPicker小部件
    baseLayerPicker: false,
    //配置图像的提供
    imageryProvider: custom,
    //配置Cesium的世界地形
    terrainProvider: Cesium.createWorldTerrain({
      //配置地形的3D效果
      requestWaterMask: true,
      requestVertexNormals: true
    })
  });

  viewer.camera.setView({
    //设置摄像头初始的具体位置(经度，纬度，高度)
    destination: Cesium.Cartesian3.fromDegrees(113.318977, 23.114155, 2000),
    //方向、视角角度的配置
    orientation: {
      //方向旋转90度
      heading: Cesium.Math.toRadians(90),
      //视角角度45度
      pitch: Cesium.Math.toRadians(-45),
    }
  })

});
</script>
 
<style>
#cesiumContainer {
  width: 1000px;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>